<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>登录</title>
<link rel="icon" th:href="@{/static/cloud/img/favicon.ico}">
<link th:href="@{/static/wapAlert/wapAlert.css}" type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" th:href="@{/static/cloud/css/pages/wechat-login.css}"/>
<link th:href="@{/static/wapAlert/wapAlert.css}" type="text/css" rel="stylesheet" />

<body>

<input type="hidden" id="avatarUrl" th:value="${avatarUrl}"/>
<input type="hidden" id="nickName" th:value="${nickName}"/>
<input type="hidden" id="openid" th:value="${openid}"/>
<!-- /header -->
<div class="login">
    <div class="loginImg">
<!--        <img src="/static/cloud/img/modal-logo.png" />-->
    </div>
    <div class="loginContent login-window-modal" style="display: block;">
        <h2>用户登录</h2>
        <div class="login-userName">
            <i class="icon-human"></i>
            <input type="text" class="username" placeholder="请输入用户名或手机号" />
        </div>
        <div class="login-userPsd in-password">
            <i for="psd" class="icon-lock"></i>
            <input type="password" class="password" placeholder="请输入登录密码">
            <img src="/static/cloud/img/in-see.png" class="eyes">
        </div>

        <div class="login-userPsd in-code">
            <i for="psd" class="icon-lock"></i>
            <input type="text" class="validCode" placeholder="请输入验证码">
            <img class="validCodeImg" src="/console/auth/code?v=032&type=1&s=22" alt="" />
        </div>
        <div class="forget clearfix qrcode-btn">
            <a href="javascript:void(0)">   </a>
        </div>
        <div class="login-btn">
            <a href="javascript:void(0)" class="btn-danger login-save-btn"><i class="icon-enter"></i>登录</a>
        </div>
    </div>

<!--    <div class="loginContent qrcode-modal">-->
<!--        <form class="layui-form">-->
<!--            <div class="code-box" id="wx_reg">-->
<!--                <img src="/static/console/img/login_code.png"/>-->
<!--            </div>-->
<!--        </form>-->
<!--        <div class="forget clearfix login-window-btn">-->
<!--            <a href="javascript:void(0)">密码登录</a>-->
<!--        </div>-->
<!--    </div>-->
</div>
<!-- /content -->

</div>

<script type="text/javascript" th:src="@{/static/cloud/js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/wapAlert/wapAlert.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/cloud/js/base.js}" charset="utf-8"></script>
<script type="text/javascript">

    $(function () {
        // $('.login-window-modal').hide();
       // $(".forget a").on("click", function (){
       //     wapAlert("请联系管理人员，谢谢^~^!")
       // });

        $(document).keyup(function(event){
            if(event.keyCode ==13){
                $(".login-save-btn").trigger("click");
            }
        });

       $(".login-save-btn").on("click", function () {
           var username = $(".username").val();
           var password = $(".password").val();
           var openid = $('#openid').val();
           var nickName = $('#nickName').val();
           var avatarUrl = $('#avatarUrl').val();
           var validCode = $(".validCode").val();

           if (isNull(username)) {
               wapAlert("请输入用户名或手机号码");
               return false;
           }

           if (isNull(password)) {
               wapAlert("请输入登录密码");
               return false;
           }

           if (isNull(validCode)) {
               wapAlert("请输入验证码");
               return false;
           }

           var option = {
               username: username,
               password: password,
               verifyCode: validCode
           };
           if (!isNull(openid))
               option['openid'] = openid;
           if (!isNull(avatarUrl))
               option['avatarUrl'] = avatarUrl;
           if (!isNull(nickName))
               option['nickName'] = nickName;

           wapLoading.show();
           // console.log(option)
           $.ajax( {
               url: '/console/login',
               async: true,
               dataType:'json',
               type: 'post',
               data : option,
               success: function (obj) {
                   wapLoading.hide();
                   wapAlert(obj.msg);
                   // alert(JSON.stringify(obj))
                   getPicCode();
                   if (obj.code == 0) {
                       window.location.href = '/cloud/index';
                   }
                   console.log(obj)
               },error:function () {
                   wapAlert('网络链接超时,请稍后再试！');
                   wapLoading.hide();
               },complete: function(XMLHttpRequest, status) {
                   if(status == 'timeout') {
                       wapAlert('网络链接超时,请稍后再试！');
                       wapLoading.hide();
                   }
               }
           });
       });

        //	更换图片验证码
        $(".in-code").on("click", "img", function(e) {
            getPicCode();
        });

        // $('.validCode').on('click', function () {
        //     var validCode = $('.validCode').attr('data-type');
        //     getPicCode();
        // });
        $('.validCodeImg').on('click', function () {
            var validCode = $('.validCode').attr('data-type');
            getPicCode();
        });

        //点击更换图片
        function getPicCode() {
            var urls = "/console/auth/code?v=032&type=1&" + new Date().getTime();
            $(".validCodeImg").attr("src", urls);
        }
    });

    $(".eyes").on("click", function() {
        $(this).toggleClass('on');
        if($(this).hasClass('on')) {
            $(this).attr('src', '/static/cloud/img/in-seeing.png');
            $(this).siblings().attr('type', 'text');
        } else {
            $(this).attr('src', '/static/cloud/img/in-see.png');
            $(this).siblings().attr('type', 'password');
        }
    })


    $('.loginContent div input').focus(function() {
        $(this).addClass('on');
    }).blur(function() {
        $(this).removeClass('on');
    });
</script>
</body>

</html>